<template>
  <div class="map" id="map" style="width:737px;height:400px"></div>
</template>
<script>
import '../../echarts/map/js/china'
export default {
  // 图表实例
  mounted () {
    this.init()
  },
  methods: {
    // 取随机数
    getRandomInt (min, max) {
      min = Math.ceil(min);
      max = Math.floor(max);
      return Math.floor(Math.random() * (max - min)) + min; // 不含最大值，含最小值
    },
    // 中国地图
    randomData () {
      return Math.round(this.getRandomInt(674, 90105));
    },
    init () {
      // 2.基于准备好的dom，初始化echarts实例
      const chart = this.$echarts.init(document.getElementById('map'));
      // 3.配置数据
      const option = {
        title: {
          text: '全国各省份营业额和订单量统计',
          left: '0',
          top: '10',
          textStyle: {
            color: 'rgb(85, 85, 85)',
            fontSize: 14,
            fontWeight: 400
          }
        },
        visualMap: { // 地图图例
          min: 676,
          max: 90104,
          range: [674, 90104],
          left: 0,
          bottom: 0,
          text: ['价格'],
          calculable: true,
          itemWidth: 10,
          itemHeight: 80,
          showLabel: true,
          // seriesIndex: [1],
          inRange: {
            color: ['rgb(155, 139, 186)', 'rgb(224, 152, 199)', 'rgb(143, 211, 232)', 'rgb(113, 102, 158)']
          },
          show: true
        },
        tooltip: {
          trigger: 'item',
          backgroundColor: 'rgba(50,50,50,0.7)',
          borderColor: 'rgba(50,50,50,0.7)',
          formatter: '{b} <br />销售额：{c}',
          textStyle: {
            color: '#fefdfd'
          }
        },
        geo: { // 中国地图设置
          map: 'china',
          bottom: '0',
          scaleLimit: {
            min: 1,
            max: 1
          },
          zoom: 1,
          top: 40,
          label: {
            normal: {
              show: true,
              fontSize: '12',
              color: 'rgba(0,0,0,0.7)'
            }
          },
          itemStyle: {
            normal: {
              borderColor: 'rgba(0, 0, 0, 0.2)'
            },
            emphasis: {
              areaColor: '#f2d5ad',
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              borderWidth: 0
            }
          }
        },
        series: {
          type: 'map',
          geoIndex: 0,
          data: [

            { name: '北京', value: this.randomData() }, { name: '天津', value: this.randomData() },
            { name: '上海', value: this.randomData() }, { name: '重庆', value: this.randomData() },
            { name: '河北', value: this.randomData() }, { name: '河南', value: this.randomData() },
            { name: '云南', value: this.randomData() }, { name: '辽宁', value: this.randomData() },
            { name: '黑龙江', value: this.randomData() }, { name: '湖南', value: this.randomData() },
            { name: '安徽', value: this.randomData() }, { name: '山东', value: this.randomData() },
            { name: '新疆', value: this.randomData() }, { name: '江苏', value: this.randomData() },
            { name: '浙江', value: this.randomData() }, { name: '江西', value: this.randomData() },
            { name: '湖北', value: this.randomData() }, { name: '广西', value: this.randomData() },
            { name: '甘肃', value: this.randomData() }, { name: '山西', value: this.randomData() },
            { name: '内蒙古', value: this.randomData() }, { name: '陕西', value: this.randomData() },
            { name: '吉林', value: this.randomData() }, { name: '福建', value: this.randomData() },
            { name: '贵州', value: this.randomData() }, { name: '广东', value: this.randomData() },
            { name: '青海', value: this.randomData() }, { name: '西藏', value: this.randomData() },
            { name: '四川', value: this.randomData() }, { name: '宁夏', value: this.randomData() },
            { name: '海南', value: this.randomData() }, { name: '台湾', value: this.randomData() },
            { name: '香港', value: this.randomData() }, { name: '澳门', value: this.randomData() }

          ]
        }
      }
      // 4.传入数据
      chart.setOption(option);

      // 在有些场景下，我们希望当容器大小改变时，图表的大小也相应地改变。
      // window.onresize = function () {
      //   chart.resize()
      // }
    }
  }
};
</script>
<style lang="less" scoped>
.map {
}
</style>
